﻿@namespace Project.Web.Shared.Components
@inherits JsComponentBase
<div class="split-view @(Direction)" style="display:flex; flex-direction: @Direction ;gap:@Gap">
    <div class="view-content view-content-first" style="width: @(InitWidth ?? "50%");" @ref="panel1">
        @FirstContent
    </div>
    <div class="split-view-separator" style="@SeparatorStyle.Style" @ref="separator"></div>
    <div class="view-content view-content-second" style="flex:1;" @ref="panel2">
        @SecondContent
    </div>
</div>

@code {
    [Parameter] public RenderFragment? FirstContent { get; set; }
    [Parameter] public RenderFragment? SecondContent { get; set; }
    [Parameter] public string Gap { get; set; } = "5px";
    /// <summary>
    /// column / row
    /// </summary>
    [Parameter] public string Direction { get; set; } = "row";
    [Parameter] public int SeparatorWidth { get; set; } = 10;
    [Parameter] public string? InitWidth { get; set; }
    /// <summary>
    /// % or px
    /// </summary>
    [Parameter] public string Min { get; set; } = "30%";
    /// <summary>
    /// % or px
    /// </summary>
    [Parameter] public string Max { get; set; } = "70%";
    StyleBuilder SeparatorStyle => StyleBuilder.Default.AddStyle("width", () => $"{SeparatorWidth}px", () => Direction == "row")
        .AddStyle("height", () => $"{SeparatorWidth}px", () => Direction == "column");

    ElementReference? separator;
    ElementReference? panel1;
    ElementReference? panel2;

    protected override async ValueTask Init()
    {
        await InvokeVoidAsync("init", new
        {
            panel1,
            panel2,
            separator
        }, new
        {
            Direction,
            Max,
            Min,
            InitWidth
        });
    }
}
